<template>
<div>
 <el-container style="min-height: 100vh; overflow: hidden;">
   <el-aside :width= 'asidWith'  style="background-color: rgb(24, 74, 161);" >
    <asideVue :flag = "flag"></asideVue>
  </el-aside>

  <el-container>
    <el-header style="border-bottom: 1px solid rgb(42, 7, 77); padding: 0px; ">
     <headerVue :flag="flag" :iconFold="iconFold"  @collapse="collapse()"></headerVue>
    </el-header>

    <el-main>
      <router-view></router-view>
    </el-main>

  </el-container>

</el-container>
</div>
</template>
<script>

import asideVue from '../components/ElAside.vue'
import headerVue from '../components/ElHeader.vue'

export default {
  data () {
    return {
      flag: false,
      asidWith: '',
      iconFold: 'el-icon-s-fold'
    }
  },
  components: {
    asideVue,
    headerVue
  },
  created () {

  },
  computed: {
  },
  methods: {

    collapse () {
      this.flag = !this.flag
      if (this.flag) {
        this.asidWith = '64px'
        this.iconFold = 'el-icon-s-unfold'
      } else {
        this.asidWith = '200px'
        this.iconFold = 'el-icon-s-fold'
      }
    }

  }

}
</script>

<style lang="scss" scoped>
.el-main{
  padding: 0px;
  overflow: hidden;
}
</style>
